<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta content="width-device-width,initial-scale=1.0" name="viewport">
    <meta content="sie-edge" http-equiv="X-UA-Compatible"/>
    <link rel="stylesheet" th:href="@{/OAuth2/css/style.css}" type="text/css">
    <title>登录注册页面</title>

    <!--图标库-->
    <script src="https://unpkg.com/ionicons@4.2.2/dist/ionicons.js"></script>

</head>

<body>

<div class="container" id="container">
    <div class="form-container sign-up-container">
        <form action="#">
            <h1>注册Ation</h1>
            <!--					<div class="social-container"> -->
            <!--						<a href="#" class="social">-->
            <!--							<ion-icon name="logo-facebook"></ion-icon>-->
            <!--						</a> <a href="#" class="social">-->
            <!--							<ion-icon name="logo-googleplus"></ion-icon>-->
            <!--						</a> <a href="#" class="social">-->
            <!--							<ion-icon name="logo-linkedin"></ion-icon>-->
            <!--						</a>-->
            <!--					</div>-->
            <!--					<span>或使用您的电子邮箱注册</span>-->
            <input placeholder="姓名" type="text">
            <input placeholder="邮箱" type="email">
            <input placeholder="密码" type="password">
            <button>注册</button>
        </form>
    </div>
    <div class="form-container sign-in-container">
        <form action="#">
            <h1>登录Ation</h1>
            <div class="social-container">
                <!-- 						<a href="#" class="social">
                                            <ion-icon name="logo-facebook"></ion-icon>
                                        </a> <a href="#" class="social">
                                            <ion-icon name="logo-googleplus"></ion-icon>
                                        </a> <a href="#" class="social">
                                            <ion-icon name="logo-linkedin"></ion-icon>
                                        </a> -->
            </div>
            <!-- 					<span>账户登录</span> -->
            <input placeholder="邮箱" type="email">
            <input placeholder="密码" type="password">
            <button>登录</button>
        </form>
    </div>
    <div class="overlay-container">
        <div class="overlay">
            <div class="overlay-panel overlay-left">
                <h1>欢迎回来</h1>
                <p>与我们保持联系请登录您的个人信息</p>
                <button class="ghost" id="signIn">登录</button>
            </div>
            <div class="overlay-panel overlay-right">
                <h1>欢迎光临</h1>
                <p>输入您的个人资料，并与我们一起开始旅程</p>
                <button class="ghost" id="signUp">注册</button>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/OAuth2/js/script.js}"></script>

</body>
</html>